<!DOCTYPE html>
<html>
<head>
    <meta name="screen-orientation" content="portrait">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <title>抽奖小程序</title>
    <link rel="stylesheet" type="text/css" href="src/assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="src/assets/css/wall.css">
    <style type="text/css">
        .wall {
            overflow: scroll;
            background-repeat: repeat;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        body, html {
            width: 100%;
            height: 100%;
        }

        .mask {
            -webkit-filter: blur(5px);
            filter: blur(5px);
        }

        #main {
            -webkit-transition: all 1s;
            transition: all 1s;
        }

        .result-list {
            text-align: center;
            color: #4de7c8;
            font-size: 30px;
            line-height: 50px;
            margin-top: 50px;
            margin-bottom: 50px;
            font-family: '幼圆';
        }

        .result-title {
            text-align: center;
            color: #4de7c8;
            font-size: 40px;
            margin-top: 100px;
            font-family: '幼圆';
        }
        .button-warning {
            color: white;
            background: rgb(223, 117, 20);
        }

        .button-success, .button-error, .button-warning, .button-secondary {
            color:white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
        .pure-button {
            font-family: inherit;
            font-size: 100%;
            padding: .5em 1em;
            border: 0 rgba(0,0,0,0);         
            text-decoration: none;
            border-radius: 2px;
        }
        .pure-button {
            display: inline-block;
            margin: 5px;
            padding: 10px 0;
            text-align: center;
            width: 150px;
            border-radius: 10px;
        }
        button, input, optgroup, select, textarea {
            color: inherit;
            font: inherit;
            margin: 0;
            border: none;
        }

        button {
            overflow: visible;
        }

        button, select {
            text-transform: none;
        }

        button, html input[type=button], input[type=reset], input[type=submit] {
            -webkit-appearance: button;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="main" class="wall">
        <div class="result-title">季度会签到</div>
        <div class="result-list">
            <div><p>{{message}}</p></div>
            <div style="margin-top: 20px;"><input v-model="person" placeholder="请输入姓名" style="width:200px;color:orangered;text-align:center;border-radius:5px;"></div>
            <div style="margin-top: 20px;"><input v-model="phone" placeholder="请输入手机号" style="width:200px;color:orangered;text-align:center;border-radius:5px;"></div>
            <div style="margin-top: 20px;">
                <button class="pure-button button-warning" @click="signin">确认签到</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="src/assets/js/vue.js"></script>
    <script type="text/javascript" src="src/assets/js/jquery.min.js"></script>
    <script type="module">
        import axios from 'axios';
        Vue.prototype.$axios = axios;
    </script>
    <script type="text/javascript">
        new Vue({
            el: '#main',
            data: {
                results: [],
                message: "请输入姓名",
                person: "",
                phone: ""
            },
            mounted() {
                let vm = this
                let locals = window.localStorage
                let str_results = []
                // 遍历(排除choosed)
                for (let i = 0; i < localStorage.length; i++) {
                    if (localStorage.key(i) !== 'choosed') {
                        str_results.push(localStorage.getItem(localStorage.key(i)))
                    }
                }
                // 分割每个string, 并将</br>换成空格
                let results = []
                for (let nameList of str_results) {
                    let temp = JSON.parse(nameList)
                    temp = temp.map(item => { return item.replace('<br/>', ' ') })
                    results.push(temp)
                }

                // 根据长度进行排序，名单短的放在前面
                results = results.sort((x, y) => { return x.length - y.length; })
                this.results = results
            },
            methods: {
                signin: function () {
                    try {
                        // 发送异步请求到后台
                        //const userData = { \"id\": \"123\", \"name\": \"John Doe\", \"age\": \"30\" };
                        //const response = this.$axios.post('https://localhost:7179/LotteryPerson?fullname=asdfs', {  Phone: this.phone,  FullName: this.person });
                        //console.log(response.data);
                        var url = "/LotteryPerson/Post?fullname=" + this.person+"&phone="+this.phone;
                        $.post(url, {}, function (data) {
                            console.log(data.Code);
                            if (data.Code == 200) {
                                alert("签到成功");
                            } else {
                                //alert("");
                            } 

                        },'json');
                        //$.ajax({
                        //    url: url,
                        //    dataType: 'jsonp',
                        //    processData: false,
                        //    type: 'POST',
                        //    success: function (data) {
                        //        console.log(data);
                        //        alert(data.name);
                        //    },
                        //    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //        alert(XMLHttpRequest.status);
                        //        alert(XMLHttpRequest.readyState);
                        //        alert(textStatus);
                        //    }
                        //});
                    //    // 处理后台返回的数据
                    } catch (error) {
                        console.error(error);
                        // 处理错误
                    }
                }
            }
        })
    </script>
</body>
</html>